<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分页插件demo</title>
    <link rel="stylesheet" href="./css/pagination.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css">
        #list {
            width: 1200px;
            margin: 10px auto;
        }

        #list ul {
            list-style: none;
            width: 100%;
        }

        #list ul li {
            width: 200px;
            height: 310px;
            margin: 10px;
            position: relative;
            float: left;
            box-sizing: border-box;
            margin: 0px 20px;
        }

        #list ul li:hover {
            border: 1px solid #d04;
        }

        #list>ul>li>.img {
            padding: 10px 10px 0px;
        }

        #list>ul>li>.img>img {
            display: block;
            width: 180px;
            height: 180px;
            margin: 0px auto;
        }

        #list>ul>li>.info {
            width: 100%;
            height: 80px;
        }

        #list>ul>li>.info>p {
            font-size: 12px;
        }

        #list>ul>li>.buyBtn {
            margin-bottom: 0px;
        }

        #setPageDiv {
            clear: left;
            width: 1000px;
            margin: 10px auto;
        }

        .shopping {
            position: fixed;
            height: 50px;
            width: 200px;
            right: 0px;
            top: 15px;
        }

        .shopping-buy-btn {
            border: 1px dotted #cdcdcd;
            background-color: #cdcdcd;
            color: #cc0033;
            font-size: small;
            border-radius: 3px;
            box-shadow: 0 0 5px #cdcdcd;

        }

        .shopping span.showNum {
            position: absolute;
            left: 8px;
            top: -8px;
            background-color: #f69;
            color: #FFFFFF;
            font-size: large;
            width: 20px;
            height: 15px;
            border-radius: 20px;
            text-align: center;
        }

        .buyBtn{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: white;
            background-color: #d04;
            margin-left: 5px;
        }
        .buyBtn:hover{
            cursor: pointer;
            background-color: rgba(221, 0, 66, 0.418);
        }

        .pPrice{
            color: red;
            font-size: 30px;
            font-weight: bold;
        }
        .pName{
            height: 40px;
            box-sizing: border-box;
            padding-top: 5px;
        }
    </style>
</head>

<body>
    <div id="header"></div>
    </div>
    <div id="list">
        <ul></ul>
    </div>
    <div id="setPageDiv">
        <div id="Pagination" class="box"></div>
    </div>
    <div id="footer"></div>

</body>
<script src="./public/JQuery/jquery.min.js"></script>
<script src="./public/JQuery/jquery.pagination.js"></script>
<script>
    class Page {
        constructor(ops) {
            this.box = ops.box;
            this.list = ops.list;
            this.url = ops.url;
            this.num = ops.num || 12;
            this.index = ops.index || 0;
            this.load();
        }
        load() {
            $.ajax({
                url: this.url,
                success: res => {
                    this.res = JSON.parse(res);
                    this.res = this.res.msg
                    console.log(this.res)
                    this.renderPage();
                }
            })
        }
        renderPage() {
            this.box.pagination(this.res.length, {
                items_per_page: this.num,
                current_page: this.index,
                callback: (i) => {
                    this.index = i;
                    this.render()
                }
            })
        }
        render() {
            let str = "";
            for (var i = this.index * this.num; i < this.index * this.num + this.num; i++) {
                if (i < this.res.length) {
                    str += `<li  index="${this.res[i].GoodsID}">
                                <div class="img">
                                    <a href="./productDisplay.html?id=${this.res[i].GoodsID}">
                                    <img src="./images/${this.res[i].src}.jpg">
                                    </a>
                                </div>
                                <div class="info">
                                <p class="pName">${this.res[i].GoodsName}</p>
                                <p class="pID"><span>商品编号:</span>${this.res[i].GoodsID}</p>
                                <p class="pPrice">￥${this.res[i].GoodsPrice}</p>
                                </div>
                                <div class="buyBtn">加入购物车<span class="addOne"></span></div>
                            </li>`;
                }
            }
            this.list.html(str);
        }
    }

    new Page({
        box: $(".box"),
        list: $("#list").children("ul"),
        url: "http://localhost:3000/database/goodsBasic.json",
        num: 4,
        index: 0
    })

</script>
<script src="./JSlibrary/goodsList.js"></script>
<!-- <script src="./JSlibrary/loginSafe.js"></script> -->
<script>
    $("#header").load("http://localhost:3000/public/public.html .header", function () {
            const oun = document.querySelector(".un");
            const exit=document.querySelector(".exit")
            if (localStorage.getItem("isLogin") === "ok") {
                oun.innerHTML = localStorage.getItem("username");
                exit.style.display="inlineBlock";
                exit.onclick=function(){
                    localStorage.removeItem("username");
                    localStorage.setItem("isLogin", "");
                    location.href = "./goodsList.html";
                }
            } else {
                oun.innerHTML=`<a href="./login.html">登录<a>`;
                exit.style.display="none";
    
            }
        })
</script>
<script>
    $("#footer").load("http://localhost:3000/public/public.html .footer")
</script>
</html>